<template>
	<view class="address-edit page">
		<view class="yf-form">
			<text class="label">联系人</text>
			<input v-model="address.name" class="inp" type="text" placeholder="收货人姓名">
		</view>
		<view class="yf-form">
			<text class="label">手机号</text>
			<input v-model="address.mobile" class="inp" type="text" placeholder="手机号">
		</view>
		<picker mode="region" @change="selectAddress">
		<view class="yf-form">
				<text class="label">地址</text>
				<input disabled="disabled" :value="addressTxt" class="inp" type="text" placeholder="省/市/县">
		</view>
		</picker>
		<view class="yf-form">
			<text class="label">详细地址</text>
			<input v-model="address.detail" class="inp" type="are" placeholder="精确到门牌号"/>
		</view>
	
		
		<view class="yf-form switch">
			<text class="label">默认</text>
			<switch  :checked="address.def"  @change="switchDef" class="sw" />
		</view>
		
		<view class="btn" @click="merge">
			保存
		</view>
		
	</view>
</template>

<script>
	import {mergeMallAddress,mallAddressInfo} from '@/api/address.js'
	import {showCorrect,showError} from '@/toast/index.js'
	export default {
		data(){
			return {
				address:{}
			}
		},
		onShow(){
		   let aid =  this.$Route.query.id
		  
		   if(aid){
			  mallAddressInfo(aid).then(res => {
			  	this.address = res.data
			  }) 
		   }
			
		},
		computed:{
			addressTxt(){
				let array = [this.address.province,this.address.city,this.address.county]
				return array.join(" ")
			}
		},
		methods:{
			switchDef(e){
				this.address.def=  e.detail.value
			},
			selectAddress(e){
				console.log(e.detail.value[0] )
				console.log(e.detail.value )
				this.$set(this.address,"province",e.detail.value[0] )
				this.$set(this.address,"city",e.detail.value[1] )
				this.$set(this.address,"county",e.detail.value[2] )
			},
			merge(){
				if(!this.address.mobile||this.address.mobile.length<11||!this.address.province){
					showError("正确填写信息")
					return
				}
				mergeMallAddress(this.address).then(res => {
					showCorrect()
					this.$Router.back()
				})
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.address-edit
		padding 0 20upx
		background url(../../static/dbg.png) no-repeat
		background-size 100% 150upx
		background-color #EFEFEF
	.yf-form
		border-bottom 1px solid #DCDCDC
		height 105upx
		background-color white
		display flex
		align-items center
		padding 0 30upx
		&.switch
			height 99upx
			margin-top 10upx
			display flex
			justify-content space-between
			.sw
				transform:scale(0.7)
		.label
			min-width 120upx
			color #6F6F6F
			font-size 28upx
			margin-right 40upx
		.inp
			width 100%
			font-size 28upx
			color #A1A1A1
	.btn
		position absolute
		bottom 20upx
		left 20upx
		right 20upx
		height:80upx;
		background:#F7895E
		border-radius:30px
		color #FFFFFF
		font-size 28upx
		display flex
		align-items center
		justify-content center
		 margin-top 23upx
</style>
